<template>
  <div>
    <!--表格-->
    <template>
      <el-table :data="tableData" border style="width: 100%;height:800px">
        <el-table-column prop="id" label="订单号"> </el-table-column>
        <el-table-column prop="create_time" label="下单时间"> </el-table-column>
        <el-table-column prop="total_price" label="总价"> </el-table-column>
        <el-table-column prop="seats_id" label="对应餐桌"> </el-table-column>
        <el-table-column prop="name" label="操作" >
          <template slot-scope="scope">
          <el-button type="primary"  @click="findDishes(scope.row)"
            >订单详情</el-button
          ></template>
        </el-table-column>
      </el-table>
    </template>
    <!--抽屉-->
    <el-drawer :visible.sync="drawer" :direction="direction" size="60%" ref="guanbi">
      <h1 id="mytitle">订单详情</h1>
      <el-row>
       <el-col :span="12"><div>
         <p>订单号:{{orderNum}}</p>
         </div></el-col>
      <el-col :span="12"><div>
        <p>桌号:{{seatNum}}</p>
        </div></el-col>
    </el-row>
      <template>
        <el-table :data="orderData" style="width: 60%" height="250">
          <el-table-column fixed prop="dishes_main_id" label="菜名" >
          </el-table-column>
          <el-table-column prop="number" label="数量" >
          </el-table-column>
          <el-table-column prop="price" label="单价" >
          </el-table-column>
        </el-table> </template
    >
    <el-button type="danger" round style="margin-top:100px" @click='cancelOrder()'>取消订单</el-button>
    </el-drawer>
	<!--分页-->
	<el-pagination
      background
      layout="prev, pager, next"
      :pager-count="5"
      :page-size="8" 
      :total="totalPage2"
      :current-page="myCurrent"
      @current-change="changePage"
    >
    </el-pagination>
	</div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  name: "order1",
  data() {
    return {
      drawer: false,
      direction: "rtl",
      seatNum:0,
      orderNum:0
    };
  },
  methods: {
    ...mapActions(["pageData",'totalPage','myCurrentChange','thisDishes','cancelMyOrder','dangqianInit2']),
    findDishes(obj) {
      this.seatNum=obj.seats_id
      this.orderNum=obj.id
      this.thisDishes(this.orderNum)

      this.drawer = true;
    },
    cancelOrder(){
      this.openTip()
      
    },
      openTip() {
        this.$confirm('此操作将删除该订单', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.cancelMyOrder(this.orderNum).then(res=>{
            if (res==200) {
             this.totalPage()
             this.pageData(this.requestPage2);
            this.$message({
            type: 'success',
            message: '取消成功'
          });
          setTimeout(this.$refs.guanbi.closeDrawer,500)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
      },
      changePage(val){
          this.myCurrentChange(val)
          this.pageData(this.requestPage2);
      }
  },
  created() {
    this.dangqianInit2()
    this.pageData(this.requestPage2);
    this.totalPage()
  },
  computed: {
    ...mapState({
      tableData: state => state.jsdd.tableData,
      myCurrent:state=> state.jsdd.dangqian2,
      orderData:state=>state.jsdd.thisOrder,
      myPage:state=>state.jsdd.page
    }),
    ...mapGetters(['totalPage2','requestPage2'])
  },
  watch:{
    tableData(){
      if (this.tableData==undefined&&this.myPage>1) {
        this.$store.state.jsdd.dangqian2--
        this.pageData(this.requestPage2);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.el-pagination {
  position: absolute;
  left: 50%;
  top: 80%;
}

.el-table {
  margin: auto;
}
#mytitle {
  font-size: 25px;
  margin: 0;
}
</style>